<template>
<div class="addRecords autoGrow flex-column">
  <slot></slot>
  <div class="subTitle">添加记录</div>
  <div class="recordsList autoGrow flex-column">
    <div
      class="recordItem flex-column"
      :key="record.id"
      v-for="(record, index) in records">
      <div class="recordItemInfo flex-row">
        <img :src="record.avatar" alt="">
        <div class="serviceInfo flex-column">
          <div class="flex-row serviceInfoDetail">
            <div class="serviceName">{{record.name}}</div>
            <div>添加{{record.itemcount}}好友</div>
          </div>
          <div class="fontGrey sendTyeInfo">
            <span>{{formatTime(record.createtime)}}</span>&emsp;
            <span class="recordType">{{ record.starttime?'定时发送：':'即时发送' }}</span>
            <span v-if="record.starttime">{{formatTime(record.starttime)}}</span>&emsp;
          </div>
        </div>
        <div class="labels flex-row autoGrow">
          <span v-if="record.senditemcount!=record.itemcount" class="layui-badge layui-bg-green">发送中</span>
          <button @click="cancelSend(record)" class="layui-btn layui-btn-danger layui-btn-xs ">
            {{record.senditemcount!=record.itemcount?'取消发送':'删除'}}
          </button>
        </div>
      </div>
      <div class="targetsOperate flex-row">
        <div class="layui-progress autoGrow">
          <div
              class="layui-progress-bar progress layui-bg-orange" :style="{ width:(record.senditemcount||0)/record.itemcount * 100 +'%' }">
          </div>
        </div>
        <span>{{`${record.senditemcount||0}/${record.itemcount}`}}</span>
        <button
            @click="toggleDetail(index)"
            class="layui-btn layui-btn-warm layui-btn-xs">
            {{ record.showDetail ? '收起' : '详细' }}
        </button>
      </div>
      <div class="recordDetail flex-column" v-if="record.showDetail">
        <div class="tabs">
          <button
              @click="changeDetail(index, 2)"
              :class="['layui-btn','layui-btn-xs',(typeof record.detailType ==='undefined' || record.detailType == 2)?'':'layui-btn-primary' ]">
              已通过
          </button>
          <button
              @click="changeDetail(index, 0)"
              :class="['layui-btn','layui-btn-xs', record.detailType!=0 && 'layui-btn-primary']">
              待发送
          </button>
          <button
              @click="changeDetail(index, 1)"
              :class="['layui-btn','layui-btn-xs', record.detailType != 1 && 'layui-btn-primary']">
              已发送
          </button>
          <button
              @click="changeDetail(index, 3)"
              :class="['layui-btn','layui-btn-xs', record.detailType != 3 && 'layui-btn-primary']">
              失败
          </button>
        </div>
        <div class="flex-column targetsList">
          <div class="flex-row record-item" v-for="(target, i) in record.taskDetail[record.detailType||0]" :key="i">
            <friend
              :name="target.friendnick"
              :avatar="target.friendavatar"
              :wxid="target.wxinviteeaccount"
              class="progress-friend-item"   
            />
            <div class="fontGrey" v-if="record.detailType ===3">
              {{ WechatCode[target.rststatus] }}
            </div>
          </div>
          <div style="padding:10px 5px" class="fontGrey" v-if="record.taskDetail[record.detailType||0].length===0">
            暂无数据
          </div>
        </div>
        

      </div>
    </div>
  </div>
</div>
</template>
<script>
import UserListItem from '@/components/userListItem';
import Friend from '@/components/friend'
import WechatCode from '@/lib/wechat-code'
export default {
  name: 'addFriendRecord',
  data() {
    return {
      flagMap: {
        instant: '即时发送',
        timeing: '定时发送',
        sleeping: '休眠中',
        ongoing: '发送中',
        adopt: '已通过',
        waiting: '待发送',
        sent: '已发送',
        failed: '失败'
      },
      records: [],
      subTaskList:[],
      WechatCode
    }
  },
  components: {
    UserListItem,
    Friend
  },
  props: ['initialRecords'],
  mounted() {
    this.records = this.initialRecords.filter(item=>item.targets).map((record, index)=>{
        const targets = record.targets||[]
        record.filteredTargets = targets.filter(t=>t.status=='adopt')
        return record
      })
    this.$nextTick(()=>{
      this.$element.render()
    })
  },
  watch:{
    initialRecords(vals){
      this.records = vals.filter(item=>item.targets).map((record, index)=>{
        record.filteredTargets = record.targets.filter(t=>t.status=='adopt')
        return record
      })
      console.log(this.records)   

    }
  }, 
  computed:{
     
  },
  methods: {
    toggleDetail(index) {
      const record = this.records[index];
      const taskDetail = this.getSubTaskCount(record)
      const firstKey = Object.keys(taskDetail).filter(key=>taskDetail[key].length)[0]
      const detailType = typeof firstKey === 'undefined'?2:+firstKey
      this.$set(this.records, index, {
        ...record,
        showDetail: !record.showDetail,
        taskDetail:this.getSubTaskCount(record),
        detailType,
      })
    },
    getSubTaskCount(record){
      const taskmap={
        2:[], // 通过
        0:[], // 待发
        1:[], // 已发
        3:[]  // 失败
      }
      record.wxInviteSubTaskList.forEach(item=>{
        // 0:待发送 1:已发送  2:已通过 3:超时失败
        if(!item.addstatus || item.rststatus===-100 || item.rststatus===-999 || item.rststatus===-101 ){
          taskmap[0].push(item)
        }else if(item.addstatus == 1){
          taskmap[1].push(item)
        }else if(item.addstatus == 2){
          taskmap[2].push(item)
        }else if(item.rststatus!==-100 && item.rststatus!==-999 && item.rststatus!==0 && item.rststatus!==-101){
          taskmap[3].push(item)
        }
      })
      return taskmap
    },
    changeDetail(index, type) {
      const record = this.records[index];
      const filteredTargets = record.targets.filter(t=>t.status==type)
      this.$set(this.records, index, {
        ...record,
        detailType: type,
        filteredTargets
      })
    },
    cancelSend(record) {
      this.$emit('cancel', record)
    }
  }
}
</script>
<style scoped>
.addFriendContainer .addRecords .recordItem .recordItemInfo .serviceName{
  margin-right: 20px;
  color: #5b6a91
}
.record-item{
  padding:5px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
</style>